<template>
	<div class="category-content order-content">
		<div class="main-width">
			<div class="manage-center-content">
				<div class="manage-slide">
					<el-col>
					    <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @select="setStatus" :default-openeds="defaultOpen">
					    	<el-submenu index="1">
					        	<template slot="title"><i class="default-order-icon"></i>订单管理</template>

					        	<el-menu-item index="1-0">
					        		<template slot="title">全部订单</template>
					        	</el-menu-item>
				        	
					        	<el-menu-item index="1-1">
					        		<template slot="title">待付款</template>
					        	</el-menu-item>
				        	
					        	<el-menu-item index="1-2">
					        		<template slot="title">待发货</template>
					        	</el-menu-item>
				        	
					        	<el-menu-item index="1-3">
					        		<template slot="title">已发货</template>
					        	</el-menu-item>
				        	
					        	<el-menu-item index="1-6">
					        		<template slot="title">交易成功</template>
					        	</el-menu-item>
				        	
					        	<el-menu-item index="1-7">
					        		<template slot="title">交易失败</template>
					        	</el-menu-item>
					        	<el-menu-item index="1-8">
					        		<template slot="title">售后订单</template>
					        	</el-menu-item>
					      	</el-submenu>
					    </el-menu>
				  	</el-col>
				</div>
				<div v-show="show">
					<div>
						<div class="shelves-filter-wrap">
							<span class="shelves-input-item">
								<label>订单编号：</label>
								<span>
									<input type="text" placeholder="请输入订单编号" v-model="condition.orderSn"/>
								</span>
							</span>
							<span class="shelves-input-item">
								<label>收件人：</label>
								<span>
									<input type="text" placeholder="请输入收件人姓名" v-model="condition.linkMan"/>
								</span>
							</span>
							<span class="shelves-input-item order-range-time">
								<label>下单时间：</label>
								<span>
									<el-date-picker
								      v-model="value7"
								      type="daterange"
								      align="right"
								      placeholder="选择日期范围"
								      @change="setTime"
								      :picker-options="pickerOptions2">
								    </el-date-picker>
								</span>
							</span>
							<span class="shelves-input-item" style="margin-top: 15px;">
								<label>商品名称：</label>
								<span>
									<input type="text" placeholder="请输入商品名称" v-model="condition.goodName"/>
								</span>
							</span>
							<span class="shelves-input-item">
								<label>手机号码：</label>
								<span>
									<input type="text" placeholder="请输入收件人手机号码" v-model="condition.mobile"/>
								</span>
							</span>
							<span>
								<span class="shelves-filter-btn-default shelves-filter" @click='init'>查询</span>
								<span class="shelves-filter-btn-default shelves-cancel" @click='clearCondition'>取消</span>
							</span>
						</div>
						<table class="shelves-table">
							<thead>
								<tr>
									<th>商品信息</th>
									<th>最终结算价</th>
									<th>数量</th>
									<th>售后</th>
									<th>状态</th>
									<th>包裹总额</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody class="order-tbody" v-for="item in orderList">
								<tr>
									<td colspan="7" class="self-tbody-space"></td>
								</tr>
								<tr>
									<td colspan="7" class="shelves-table-block-title no-select">
										<span>订单编号：{{item.orderSn}}</span>
										<span>下单时间：{{item.createTime}}</span>
										<span>收货人：{{item.linkMan}}</span>
										<span>收货人电话：{{item.mobile}}</span>
									</td>
								</tr>
								<tr class="order-table-item" v-for="(detail, index) in item.listDetail">
									<td class="order-table-image">
										<div class="order-table-image-wrap">
											<img :src="imgAddress + detail.navigateImg1" @error="error(1)"/>
										</div>
										<div>
											<div class="order-goods-name">{{detail.goodName}}</div>
											<div class="order-default-font order-guige">{{detail.specName}}</div>
											<div class="order-default-font order-guige">SKU：{{detail.productBn}}</div>
										</div>
									</td>
									<td class="order-default-font">¥{{detail.cooperatePrice/100}}</td>
									<td class="order-default-font">{{detail.quantity}}</td>
									<td class="order-toDetail" v-if="detail.status == 1||detail.status == 7">
										<a class="cursor-pointer">无法售后</a>
									</td>
									<td class="order-toDetail" v-else-if="detail.applyNum == 0">
										<router-link tag="a" target="_blank" :to="{name: 'AfterSale', query: { detailId: detail.orderDetailId, orderId: item.orderId}}" class="font-color-orange cursor-pointer">申请售后</router-link>									
									</td>
									<td class="order-toDetail" v-else-if="detail.applyNum < detail.quantity">
										<router-link tag="a" target="_blank" :to="{name: 'AfterSale', query: { detailId: detail.orderDetailId, orderId: item.orderId}}" class="font-color-orange cursor-pointer">已申请售后{{detail.applyNum}}件</router-link>
									</td>
									<td class="order-toDetail" v-else>
										<a class="cursor-pointer">已售后</a>
									</td>
									<td>
										<div class="font-color-orange" v-if="detail.status == 1">
											待付款
										</div>
										<div class="font-color-orange" v-else-if="detail.status == 2">
											待发货
										</div>
										<div class="font-color-orange" v-else-if="detail.status == 3">
											已发货
										</div>
										<div class="font-color-orange" v-else-if="detail.status == 6">
											交易成功
										</div>
										<div class="font-color-orange" v-else>
											交易关闭
										</div>
										<div class="order-item-time">{{detail.statusTime}}</div>
									</td>
									<td>
										<div>{{item.totalCooperatePrice/100}}</div>
										<div class="order-item-time">（邮费：¥{{item.freight/100}})</div>
										<div v-if="item.remark != ''">
											<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
												<div slot="content">{{item.remark}}</div>
												<i class="el-icon-information"></i>
											</el-tooltip>
										</div>
									</td>
									<td v-if="index == 0" :rowspan="item.listDetail.length" class="order-toDetail">
										<router-link tag="a" target="_blank" :to="{name: 'OrderDetail', query: { orderId: item.orderId }}" class="font-color-orange cursor-pointer">查看订单</router-link>
										<!-- <div class="order-default-font" v-if="item.refund == 1">查看售后</div> -->
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="block">
						<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="condition.pageNum" :total="total" :page-size="10"></el-pagination>
					</div>
				</div>
				<div v-show="!show">
					<div>
						<div class="shelves-filter-wrap">
							<span class="shelves-input-item">
								<label>售后单号：</label>
								<span>
									<input type="text" placeholder="请输入订单编号" v-model="afsCondition.afterSn"/>
								</span>
							</span>
							<span class="shelves-input-item">
								<label>订单单号：</label>
								<span>
									<input type="text" placeholder="请输入订单编号" v-model="afsCondition.orderSn"/>
								</span>
							</span>
							<span class="shelves-input-item order-range-time">
								<label>订单状态：</label>
								<span>
									<el-select v-model="afsCondition.status" placeholder="请选择">
									    <el-option
									      v-for="item in options"
									      :key="item.value"
									      :label="item.label"
									      :value="item.value">
									    </el-option>
									</el-select>
								</span>
							</span>
							<span class="shelves-input-item" style="margin-top: 15px;">
								<label>商品名称：</label>
								<span>
									<input type="text" placeholder="请输入商品名称" v-model="afsCondition.goodsName"/>
								</span>
							</span>
							<span class="shelves-input-item">
								<label>手机号码：</label>
								<span>
									<input type="text" placeholder="请输入收件人手机号码" v-model="afsCondition.mobile"/>
								</span>
							</span>
							<span class="shelves-input-item order-range-time">
								<label>下单时间：</label>
								<span>
									<el-date-picker
								      v-model="value6"
								      type="daterange"
								      align="right"
								      placeholder="选择日期范围"
								      @change="setAfsTime"
								      :picker-options="pickerOptions2">
								    </el-date-picker>
								</span>
							</span>
							<span>
								<span class="shelves-filter-btn-default shelves-filter" @click='afsInit'>查询</span>
								<span class="shelves-filter-btn-default shelves-cancel" @click='clearAfsCondition'>取消</span>
							</span>
						</div>
					
						<table class="shelves-table">
								<thead>
									<tr>
										<th>商品信息</th>
										<th>退款金额</th>
										<th>退货数量</th>
										<th>退款理由</th>
										<th>售后类型</th>
										<th>售后状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody class="order-tbody" v-for="item in afsList">
									<tr>
										<td colspan="7" class="self-tbody-space"></td>
									</tr>
									<tr>
										<td colspan="7" class="shelves-table-block-title no-select">
											<span>售后单号：{{item.afterSn}}</span>
											<span>订单号：{{item.orderInfoSn}}</span>
											<span>下单时间：{{item.orderCreateTime}}</span>
											<span v-if="item.orderStatus == 2">订单状态：待发货</span>
											<span v-else-if="item.status == 3">订单状态：已发货</span>
											<span v-else-if="item.status == 4">订单状态：已收货</span>
											<span>收货人电话：{{item.mobile}}</span>
											<span>售后时间：{{item.afterCreateTime}}</span>
										</td>
									</tr>
									<tr class="order-table-item">
										<td class="order-table-image">
											<div class="order-table-image-wrap">
												<img :src="imgAddress + item.goodsImage" @error="error(1)"/>
											</div>
											<div>
												<div class="order-goods-name">{{item.goodsName}}</div>
												<div class="order-default-font order-guige">{{item.specName}}</div>
											</div>
										</td>
										<td class="order-default-font">
											<div>¥{{item.refundFee/100}}</div>
											<div class="order-item-time">（含运费：¥{{item.refundPostage/100}})</div>
										</td>
										<td class="order-default-font">{{item.refundAmount}}</td>
										<td>
											<div>{{item.applicationReason}}</div>
										</td>
										<td>
											<div>{{item.refundType}}</div>
										</td>
										<td>
											<div v-if="item.status == 1">待处理</div>
											<div v-else-if="item.status == 2">平台同意</div>
											<div v-if="item.status == 3">已完成退款</div>
											<div v-if="item.status == 4">拒绝</div>
										</td>
										<td class="order-toDetail">
											<router-link tag="a" target="_blank" :to="{name: 'AfterSale', query: { id: item.afterSalesId}}" class="font-color-orange cursor-pointer">查看售后详情</router-link>
										</td>
									</tr>
								</tbody>
						</table>
					</div>
					<div class="block">
						<el-pagination layout="prev, pager, next" @current-change="handleAsfCurrentChange" :current-page.sync="afsCondition.pageNum" :total="afsTotal" :page-size="10"></el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import store from '../store/index.js'
	import {order, imgAddress, afterSaleList} from '../config/interface.js'
	import {toast, imageError} from '../util/tool.js'
	import {fetch} from '../config/fetch.js'
	import router from '../router/index.js'

	export default{
		data(){
			return {
				pickerOptions2: {
		          	shortcuts: [{
			            text: '最近一周',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			              picker.$emit('pick', [start, end]);
			            }
		          	}, {
			            text: '最近一个月',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			              picker.$emit('pick', [start, end]);
			            }
		          	}, {
			            text: '最近三个月',
			            onClick(picker) {
			              const end = new Date();
			              const start = new Date();
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			              picker.$emit('pick', [start, end]);
			            }
		          	}]
		        },
		        value7: '',
		        condition: {
		        	startTime: '',
			        endTime: '',
			        userId: store.state.userId,
			        status: 0,
			        orderSn: '',
			        mobile: '',
			        linkMan: '',
			        goodName: '',
			        pageSize: 10,
			        pageNum: 1
		        },
		        defaultActive: '1-0',
		        options: [{
		        	label: '全部',
		        	value: ''
		        },{
		        	label: '待发货',
		        	value: '2'
		        },{
		        	label: '已发货',
		        	value: '3'
		        },{
		        	label: '已收货',
		        	value: '4'
		        }],
		        afsList: {},
		        orderList: {},
		        imgAddress: imgAddress,
		        defaultOpen: ['1'],
		        total: 0,
		        afsTotal: 0,
		        value6: '',
		        show: true,
		        afsCondition: {
		        	afterSn: '',
		        	endTime: '',
		        	goodsName: '',
		        	mobile: '',
		        	orderSn: '',
		        	pageNum: 1,
		        	pageSize: 10,
		        	startTime: '',
		        	status: '',
		        	userId: store.state.userId
		        },
		        type: ''
			}
		},
		created(){
			this.type = this.$route.params.type;
		},
		mounted(){
			if(this.type == 'afs'){
				this.defaultActive = "1-8";
				this.show = false;
				this.condition.startTime = '';
				this.condition.endTime = '';
				this.condition.orderSn = '';
				this.condition.mobile = '';
				this.condition.linkMan = '';
				this.condition.goodName = '';
				this.value7 = '';
				this.condition.pageNum = 1;
				this.afsInit();
			}else{
				this.init();
			}
		},
		methods: {
			error(num){
				imageError(num, event);
			},
			init(){
				var data = this.condition;
				var url = order;
				fetch(url, data)
				.then(res => {
					this.orderList = res.data.list;
					if(this.total == 0){
						this.total = res.data.count;
					}
                });
			},
			afsInit(){
				var data = this.afsCondition;
				var url = afterSaleList;
				fetch(url, data)
				.then(res => {
					this.afsList = res.data.resultData;
					this.afsTotal = res.data.count;
					for(var i = 0; i < this.afsList.length; i++){
						this.afsList[i].afterCreateTime = this.afsList[i].afterCreateTime.substring(0,19);
					}
                });
			},
			setStatus(val){
				if(val == '1-8'){
					this.show = false;
					this.afsCondition.startTime = '';
					this.afsCondition.endTime = '';
					this.afsCondition.orderSn = '';
					this.afsCondition.mobile = '';
					this.afsCondition.goodsName = '';
					this.afsCondition.afterSn = '';
					this.value6 = '';
					this.afsCondition.status = '';
					this.afsCondition.pageNum = 1;
					this.afsInit();
				}else{
					this.show = true;
					this.condition.startTime = '';
					this.condition.endTime = '';
					this.condition.orderSn = '';
					this.condition.mobile = '';
					this.condition.linkMan = '';
					this.condition.goodName = '';
					this.value7 = '';
					this.condition.pageNum = 1;
					this.total = 0;
					this.condition.status = val.substring(2);
					this.init();
				}
			},
			setTime(val){
				this.condition.startTime = val.substring(0, 10);
				this.condition.endTime = val.substring(13, 23);
			},
			setAfsTime(val){
				this.afsCondition.startTime = val.substring(0, 10);
				this.afsCondition.endTime = val.substring(13, 23);
			},
			clearCondition(){
				this.condition.startTime = '';
				this.condition.endTime = '';
				this.condition.orderSn = '';
				this.condition.mobile = '';
				this.condition.linkMan = '';
				this.condition.goodName = '';
				this.value7 = '';
				this.condition.pageNum = 1;
				this.init();
			},
			clearAfsCondition(){
				this.afsCondition.startTime = '';
				this.afsCondition.endTime = '';
				this.afsCondition.orderSn = '';
				this.afsCondition.mobile = '';
				this.afsCondition.goodsName = '';
				this.afsCondition.afterSn = '';
				this.value6 = '';
				this.afsCondition.status = '';
				this.afsCondition.pageNum = 1;
				this.afsInit();
			},
			handleCurrentChange(val) {
		        this.condition.pageNum = val;
		        this.init();
		    },
		    handleAsfCurrentChange(val){
		    	this.afsCondition.pageNum = val;
		        this.afsInit();
		    }
		}
	}
</script>
<style>
</style>